<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示示例</title>

    <!--bootstrap-->
    <link rel="stylesheet" href="/mhg/css/bootstrap.min.css">
    <script src="/mhg/js/jquery.min.js"></script>
    <script src="/mhg/js/popper.min.js"></script>
    <script src="/mhg/js/bootstrap.min.js"></script>

    <!--引入axios框架-->
    <script src="/mhg/js/axios.min.js"></script>
    <!--引入Vue框架-->
    <script src="/mhg/js/vue.js"></script>
</head>
<body>

    <div class="container">
        <h2>鼠标悬停效果 - 黑色背景表格</h2>
        <p>联合使用 .table-dark 和 .table-hover 类可以设置黑色背景表格的鼠标悬停效果：</p>
        <table id="table1" class="table table-dark table-hover">
            <thead>
                <tr>
                    <th>图书名称</th>
                    <th>作者名称</th>
                    <th>出版社名称</th>
                    <th>图书简介</th>
                    <th>价格</th>
                    <th>图片路径</th>
                    <th>显示图片</th>
                </tr>
            </thead>

            <tbody>
                <tr v-for="book in books_arr">
                    <td>{{book.bookName}}</td>
                    <td>{{book.authorName}}</td>
                    <td>{{book.publishName}}</td>
                    <td>{{book.descption}}</td>
                    <td>{{book.price}}</td>
                    <td>{{book.imagePath}}</td>
                    <td><img :src="book.imagePath" width="80px" height="80px"></td>
                </tr>
            </tbody>
        </table>
    </div>


    <!--引入自己的脚本-->
    <script src="/mhg/js/mhg.js"></script>
</body>
</html>